<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Sy导航页</title>
		<link rel="icon" href="https://shenying.website/wp-content/uploads/2024/06/cropped-32x32-1.png" />
		<style>
			body {
				background-color: #DFF2EB;
			}
			.bilibili-home {
				color: #D76C82;
				cursor: pointer;
				font-weight: bold;
				margin-right: 10px;
				transition: .2s ease-in-out;
				text-decoration: none;
			}
			.bilibili-home:hover {
				transition: .4s ease-in-out;
				font-size: larger;
				border-radius: 10px;
				padding: 5px;
				box-shadow: 0 0 15px #b5b5b5;
			}
			.main-title {
				color: #7ED4AD;
			}
			.hollow-icon {
				position: absolute;
				top: 9%;
				left: 5%;
				transform: translate(-50%, -50%);
				transform-origin: center;
				width: 30px;
				height: auto;
				transition: .4s ease-in-out;
			}
			.hollow-icon:hover {
				width: 35px;
				transition: .4s ease-in-out;
				border-radius: 40%;
				padding: 1%;
				box-shadow: 0 0 20px 1px #adadad;
			}
			body {
				animation: enter-bgc 1s ease-in-out;
				background-color: floralwhite;
			}
			.Sy {
				transition: .4s ease-in-out;
			}
			.Sy a:hover {
				font-size: 32px;
				transition: .4s ease-in-out;
				text-decoration: underline;
			}
			.Sy a {
				transition: .4s ease-in-out;
				animation: Sy-enter 1.1s ease-in-out;
				font-size: 30px;
				text-decoration: none;
				color: #01a0fd;
			}
			.bg-bar {
				position: absolute;
				height: 100%;
				width: 10%;
				z-index: -1;
				top: 0;
			}
			
			.bar-1 {
				left: 0;
				background-color: #DFF2EB;
				animation: enter-1 1.5s ease-in-out;
			}
			.bar-2 {
				left: 10%;
				background-color: #B9E5E8;
				animation: enter-2 1.4s ease-in-out;
			}
			.bar-3 {
				left: 20%;
				background-color: #7AB2D3;
				animation: enter-3 1.3s ease-in-out;
			}
			.bar-4 {
				left: 30%;
				background-color: #4A628A;
				animation: enter-4 1.2s ease-in-out;
			}
			.bar-5 {
				left: 40%;
				background-color: #133E87;
				animation: enter-5 1.1s ease-in-out;
			}
			.bar-6 {
				left: 50%;
				background-color: #F3F3E0;
				animation: enter-6 1s ease-in-out;
			}
			.bar-7 {
				left: 60%;
				background-color: #133E87;
				animation: enter-7 .9s ease-in-out;
			}
			.bar-8 {
				left: 70%;
				background-color: #4A628A;
				animation: enter-8 .8s ease-in-out;
			}
			.bar-9 {
				left: 80%;
				background-color: #7AB2D3;
				animation: enter-9 .7s ease-in-out;
			}
			.bar-10 {
				left: 90%;
				background-color: #DFF2EB;
				animation: enter-10 .6s ease-in-out;
			}
			.container {
				margin: 10% auto;
				height: 100%;
				width: 50%;
				padding: 5%;
				opacity: .9;
				display: flex;
				background-color: #F3F3E0;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				border-radius: 20px;
				animation: enter-container .8s ease-in-out;
				transition: .4s ease-in-out;
			}
			.container:hover {
				opacity: 1;
				transition: .2s ease-in-out;
				box-shadow: 0 0 10px 1px #F3F3E0;
			}
			input[type="search"] {
				transform-origin: -50% -50%;
				height: 30px;
				width: 400px;
				border: 2px solid #00e395;
				border-radius: 6px;
				transition: .2s ease-in-out;
			}
			input[type="search"]:hover {
				transition: .2s ease-in-out;
				width: 415px;
			}
			input[type="search"]:active {
				border: 3px solid #00fffc;
			}
			input[type="search"]:focus {
				transition: .2s ease-in-out;
				border: 3px solid #00e395;
				outline: 0;
				box-shadow: 0px 0px 10px 1px #a9a9a9;
			}
			.search-button {
				margin-left: 10px;
				transform-origin: -50% -50%;
				font-weight: bold;
				transition: .4s ease-in-out;	
				font-size: 15px;
				height: 30px;
				width: 30px;
				border: none;
				color: white;
				border-radius: 100%;
				cursor: pointer;
				background-color: #00e395;
			}
			.search-button:hover {
				transition: .2s ease-in-out;
				box-shadow: 2px 2px 10px 2px #9a9a9a;
				height: 35px;
				width: 35px;
			}
			.search-button:active {
				background-color: purple;
			}
			.version {
				position: absolute;
				bottom: 10%;
				left: 50%;
				transform: translateX(-50%);
				text-align: center;
				transition: .2s ease-in-out;
			}
			.version:hover {
				transition: .1s ease-in-out;
				cursor: pointer;
				font-weight: bold;
				text-decoration: underline;
			}
			.version:active {
				color: green;
			}
			
			@keyframes Sy-enter {
				from { 
					color: #DFF2EB;
					font-size: 40px;
				}
				to {
					color: #01a0fd;
					 font-size: 30px;
				}
			}
			@keyframes enter-container {
				from { 
					opacity: 0; 
					transform: translateY(100%);
				}
				to {
					opacity: .9; 
				}
			}
			@keyframes enter-bgc {
				from { background-color: white; }
				to { background-color: floralwhite; }
			}
			@keyframes enter-1 {
				from {
					left: -10%;
					opacity: 0;
				}
				to {
					left: 0;
					opacity: 1;
				}
			}@keyframes enter-2 {
				from {
					left: -10%;
					opacity: 0;
				}
				to {
					left: 10%;
					opacity: 1;
				}
			}@keyframes enter-3 {
				from {
					left: -10%;
					opacity: 0;
				}
				to {
					left: 20%;
					opacity: 1;
				}
			}@keyframes enter-4 {
				from {
					left: -10%;
					opacity: 0;
				}
				to {
					left: 30%;
					opacity: 1;
				}
			}@keyframes enter-5 {
				from {
					left: -10%;
					opacity: 0;
				}
				to {
					left: 40%;
					opacity: 1;
				}
			}@keyframes enter-6 {
				from {
					left: -10%;
					opacity: 0;
				}
				to {
					left: 50%;
					opacity: 1;
				}
			}@keyframes enter-7 {
				from {
					left: -10%;
					opacity: 0;
				}
				to {
					left: 60%;
					opacity: 1;
				}
			}@keyframes enter-8 {
				from {
					left: -10%;
					opacity: 0;
				}
				to {
					left: 70%;
					opacity: 1;
				}
			}@keyframes enter-9 {
				from {
					left: -10%;
					opacity: 0;
				}
				to {
					left: 80%;
					opacity: 1;
				}
			}@keyframes enter-10 {
				from {
					left: -10%;
					opacity: 0;
				}
				to {
					left: 90%;
					opacity: 1;
				}
			}
			
		</style>
	</head>
	<body>
		<header>
			<a title="Sy个人网站主页" href="https://shenying.website">
				<img class="hollow-icon" src="https://shenying.website/wp-content/uploads/2024/06/cropped-32x32-1.png" alt="首页图标" />
			</a>
		</header>
		
		<article>
			<div class="bg-bar bar-1"></div>
			<div class="bg-bar bar-2"></div>
			<div class="bg-bar bar-3"></div>
			<div class="bg-bar bar-4"></div>
			<div class="bg-bar bar-5"></div>
			<div class="bg-bar bar-6"></div>
			<div class="bg-bar bar-7"></div>
			<div class="bg-bar bar-8"></div>
			<div class="bg-bar bar-9"></div>
			<div class="bg-bar bar-10"></div>
			<div class="container">
				<h1 class="main-title"><span title="访问Sy个人网站主页" class="Sy"><a href="https://shenying.website">Sy一下</a></span> 绕开B站的首页推荐！</h1>
				<form action="https://search.bilibili.com/all" method="get">
					<a class="bilibili-home" href="https://space.bilibili.com/">B站个人空间</a>
					<input placeholder="今天想看点什么呢？" autofocus type="search" name="keyword"/>
					<button class="search-button">🔍</button>
				</form>
			</div>
		</article>
		<footer class="version">
			version 0.0.1
		</footer>
	</body>
</html>